<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for实例</h1>
    <hr>
    <div id="app">
       <ul>
         <li v-for="item in items2">
            {{item}}
         </li>
       </ul>  
       <hr>
       <ul>
         <li v-for="(student,index) in sortStudents">
            {{index+1}} : {{student.name}}--{{student.age}}
         </li>
       </ul>
    </div>
    <script type="text/javascript">
       var app = new Vue({
        el:'#app',
        data:{
           items:[53,23,7,14,54,36,28],
           students:[
              {name: 'Jspang',age:33},
              {name: 'Panda',age:28},
              {name: 'Panpan',age:23},
              {name: 'King',age:14}
           ]
           
        },
        computed:{
            items2:function(){
                return this.items.sort(sortNumber);
            },
            sortStudents(){
               return sortByKey(this.students,'age'); 
            }
        }
       });
       function sortNumber(a,b){
        return a-b;
       }

       function sortByKey(array,key){
        return array.sort(function(a,b){
           var x=a[key];
           var y=b[key];
           return ((x<y)?-1:((x>y)?1:0));

        })
       }
    </script>
</body>
</html>